<template>
    <div id="home">
        <nav-bar class="home-nav">
            <div slot="center" class="home-nav">首页</div>
        </nav-bar>
        <swipe :images = "banners"></swipe>
        <recommend :recommends = recommends></recommend>
        <tab-contorl :titles="titles" class="tab" @tabClick="tabClick"></tab-contorl>
        <h1>{{type}}</h1>
    </div>
</template>

<script>
  import {request} from "network/request";
  import NavBar from 'components/common/NavBar'
  import Swipe from 'components/common/Swipe'
  import Recommend from 'views/home/Recommend'
  import TabContorl from 'components/content/tabContorl'
  import Bscroll from 'components/common/Bscroll'
  export default {
    name: "Home",
    components:{
      NavBar,
      Swipe,
      Recommend,
      TabContorl,
      Bscroll
    },
    data(){
      return{
        banners:[],
        recommends:[],
        keywords:[],
        dkeywords:[],
        titles: ['流行','时尚','潮流'],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]},
        },
        type:'pop'
      }
    },
    methods:{
      tabClick(index){
        switch (index) {
          case 0:
            this.type = 'pop'
            break
          case 1:
            this.type = 'new'
            break
          case 2:
            this.type = 'sell'
            break
        }
        console.log(this.type)
      },
      getBanner(){
        this.banners = [
          require("assets/img/banner/1.jpg"),
          require("assets/img/banner/2.jpg"),
          require("assets/img/banner/3.jpg"),
          require("assets/img/banner/4.jpg"),
        ]
      },
      getRecommends(){
        this.recommends = [
          {image:require("assets/img/recommend/1.png"),title:"十点抢卷"},
          {image:require("assets/img/recommend/2.png"),title:"内购福利"},
          {image:require("assets/img/recommend/3.png"),title:"初秋上新"},
          {image:require("assets/img/recommend/4.png"),title:"好物特卖"}
        ]
      },
      getHomeGoods(type){
        const page = this.goods[type].page+1
      }
    },
    created(){
      this.getBanner()
      this.getRecommends()
    }
  }
</script>

<style scoped>
    #home{
        padding-top: 44px;
    }
    .home-nav{
        background-color: #1989fa;
        color: white;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9;
    }
    .tab{
        position: sticky;
        top: 44px;
    }
</style>
